<template>
  <div class="header" v-show="showHeader">
    <div
      class="header-content"
      :style="{ width: proxy.globalInfo.bodyWidth + 'px' }"
    >
      <!-- logo -->
      <router-link to="/" class="logo">
        <span v-for="item in logoInfo" :style="{ color: item.color }">
          {{ item.letter }}</span
        >
      </router-link>
      <!-- 板块信息 -->
      <div class="menu-panel">
        <!-- 这里由于读取的是子路由的pBoardId，子路由pBoardId没有值，所以为undefined,所以加判断条件 -->
        <router-link
          to="/"
          :class="[
            'menu-item home',
            activePBoardId == undefined ? 'active' : '',
          ]"
        >
          首页</router-link
        >
        <template v-for="board in boardList">
          <el-popover
            placement="bottom-start"
            :width="300"
            trigger="hover"
            v-if="board.children.length > 0"
          >
            <template #reference>
              <span
                :class="[
                  'menu-item',
                  board.boardId == activePBoardId ? 'active' : '',
                ]"
                @click="boardClickHandler(board)"
                >{{ board.boardName }}</span
              >
            </template>
            <div class="sub-board-list">
              <span
                :class="[
                  'sub-board',
                  subBoard.boardId == activeBoardId ? 'active' : '',
                ]"
                v-for="subBoard in board.children"
                @click="subBoardClickHandler(subBoard)"
                >{{ subBoard.boardName }}</span
              >
            </div>
          </el-popover>
          <span
            :class="[
              'menu-item',
              board.boardId == activePBoardId ? 'active' : '',
            ]"
            v-else
            @click="boardClickHandler(board)"
            >{{ board.boardName }}</span
          >
        </template>
      </div>
      <!-- 登录注册用户信息 -->
      <div class="user-info-panel">
        <div class="op-btn">
          <el-button type="primary" @click="newPost">
            发帖
            <span class="iconfont icon-add"></span>
          </el-button>
          <el-button type="primary"
            >搜索
            <span class="iconfont icon-search"></span>
          </el-button>
        </div>
        <template v-if="userInfo.userId">
          <div class="message-Info">
            <el-dropdown>
              <el-badge :value="12" class="item">
                <div class="iconfont icon-message"></div>
              </el-badge>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>回复我的</el-dropdown-item>
                  <el-dropdown-item>赞了我的文章</el-dropdown-item>
                  <el-dropdown-item>下载了我的附件</el-dropdown-item>
                  <el-dropdown-item>赞了我的评论</el-dropdown-item>
                  <el-dropdown-item>系统消息</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="user-Info">
            <el-dropdown>
              <Avatar :userId="userInfo.userId" width="50"></Avatar>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>我的主页</el-dropdown-item>
                  <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        <el-button-group :style="{ 'margin-left': '10px' }" v-else>
          <el-button type="primary" plain @click="loginAndRegister(1)"
            >登录</el-button
          >
          <el-button type="primary" plain @click="loginAndRegister(0)"
            >注册</el-button
          >
        </el-button-group>
      </div>
    </div>
    <!-- 登录 注册 -->
    <LoginAndRegister ref="loginRegisterRef"></LoginAndRegister>
  </div>
  <div class="body-content">
    <router-view />
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
const { proxy } = getCurrentInstance();
import LoginAndRegister from "./LoginAndRegister.vue";
const router = useRouter();
const store = useStore();
const api = {
  getUserInfo: "/getUserInfo",
  loadBoard: "/board/loadBoard",
};
//logo信息
const logoInfo = ref([
  {
    letter: "E",
    color: "red",
  },
  {
    letter: "a",
    color: "orange",
  },
  {
    letter: "s",
    color: "yellow",
  },
  {
    letter: "y",
    color: "green",
  },
  {
    letter: "b",
    color: "blue",
  },
  {
    letter: "b",
    color: "indigo",
  },
  {
    letter: "s",
    color: "violet",
  },
]);
//是否展示头部栏
const showHeader = ref(true);
//获取滚动条高度
const getScrollTop = () => {
  let scrollTop =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  return scrollTop;
};
//登录注册
const loginRegisterRef = ref();
const loginAndRegister = (type) => {
  loginRegisterRef.value.showPanel(type);
};
const initScroll = () => {
  //初始化高度
  let initScrollTop = getScrollTop();

  window.addEventListener("scroll", () => {
    //获取当前高度
    let currentScrollTop = getScrollTop();
    let scrollType = 0;
    if (currentScrollTop > initScrollTop) {
      scrollType = 1;
    } else {
      scrollType = 0;
    }
    //更新初始化高度
    initScrollTop = currentScrollTop;
    if (scrollType === 1 && currentScrollTop > 120) {
      showHeader.value = false;
    } else {
      showHeader.value = true;
    }
  });
};
//获取用户信息
const getUserInfo = async () => {
  let result = await proxy.Request({
    url: api.getUserInfo,
  });
  if (!result) return;
  store.commit("updateLoginUserInfo", result.data);
};
//获取板块信息
const boardList = ref([]);
const loadBoard = async () => {
  let result = await proxy.Request({
    url: api.loadBoard,
  });
  if (!result) return;
  boardList.value = result.data;
  store.commit("saveBoardList", result.data);
};
//监听 登用户信息
const userInfo = ref({});
watch(
  () => store.state.loginUserInfo,
  (newValue, oldValue) => {
    if (newValue !== undefined && newValue !== null) {
      userInfo.value = newValue;
    } else {
      userInfo.value = {};
    }
  },
  { immediate: true, deep: true }
);
//监听是否展示登录框
watch(
  () => store.state.showLogin,
  (newValue, oldValue) => {
    if (newValue) {
      loginAndRegister(1);
    }
  },
  { immediate: true, deep: true }
);

//一级板块跳转点击函数
const boardClickHandler = (board) => {
  router.push(`/forum/${board.boardId}`);
};
// 二级板块跳转点击函数
const subBoardClickHandler = (subBoard) => {
  router.push(`/forum/${subBoard.pBoardId}/${subBoard.boardId}`);
};
//监听当前选中的一级板块并在store更新值
const activePBoardId = ref(0);
watch(
  () => store.state.activePBoardId,
  (newValue, oldValue) => {
    if (newValue !== 0) {
      activePBoardId.value = newValue;
    }
  },
  { immediate: true, deep: true }
);
//监听当前选中的二级板块并在store中更新值
const activeBoardId = ref(0);
watch(
  () => store.state.activeBoardId,
  (newValue, oldValue) => {
    activeBoardId.value = newValue;
  },
  { immediate: true, deep: true }
);
//发帖
const newPost = () => {
  if (!store.getters.getLoginUserInfo) {
    loginAndRegister(1);
  }
  router.push("/newPost");
};
onMounted(() => {
  initScroll();
  getUserInfo();
  loadBoard();
});
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 60px;
  box-shadow: 0 2px 6px #ddd;
  position: fixed;
  z-index: 1000;
  background: #fff;
  top: 0px;
  .header-content {
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 60px;
    .logo {
      display: block;
      margin-right: 5px;
      text-decoration: none;
      display: flex;
      font-size: 35px;
    }
    .menu-panel {
      flex: 1;
      .menu-item {
        margin-left: 20px;
        cursor: pointer;
        font-size: 16px;
      }
      .home {
        color: #000;
      }
      .active {
        color: var(--link);
      }
    }
    .user-info-panel {
      width: 300px;
      display: flex;
      align-items: center;
      .op-btn {
        .iconfont {
          margin-left: 5px;
        }
        .el-button + .el-button {
          margin-left: 5px;
        }
      }
      .message-Info {
        .icon-message {
          font-size: 25px;
          color: rgb(147, 147, 147);
          cursor: pointer;
        }
        margin-left: 5px;
        margin-right: 15px;
      }
      // .user-Info {
      // }
    }
  }
}
.sub-board-list {
  display: flex;
  flex-wrap: wrap;
  .sub-board {
    padding: 0px 10px;
    border-radius: 20px;
    margin-right: 10px;
    background-color: #eaeaea;
    border: 1px solid #ddd;
    color: #5c5a5a;
    margin-top: 10px;
    cursor: pointer;
  }
  .active {
    background-color: var(--link);
    color: #fff;
  }
  .sub-board:hover {
    color: var(--link);
  }
  .active:hover {
    color: #fff;
  }
}
.body-content {
  margin-top: 60px;
  position: relative;
}
</style>
